<template>
  <div ref="main" style="width: 800px;height: 800px;"> </div>
</template>

<script>
import * as echarts from 'echarts'
import guizhou from '@/assets/guizhou.json'
export default {
  name: "MyMemberEcharts",
  data() {
    return {
      echarts: null,
      option:{
        tooltip: {
          trigger:'item',
          formatter:(params)=>{
            if (params.value){
              return `用户数量<br/>${params.name}:${params.value}`
            }
          }
        },
        title: {
          text: '成员分布',
          left: "center",
          textStyle: {
            color: "rgb(14,105,136)",
            fontSize: 35,
            fontStyle: "oblique",
          },

        },
        series:[
          {
            data:[],
            type:'map',
            map:'guizhou',
            aspectScale: 0.75,
            zoom: 1.1,
            roam: false,
            itemStyle: {
              normal: {
                borderColor: '#2ab8ff',
                borderWidth: 1.5,
                areaColor: '#12235c'
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green'
              }
            },
          }
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.echart = echarts.init(this.$refs.main)
      echarts.registerMap('guizhou', guizhou)
      this.echart.setOption(this.option)
      this.getData()
    },
    getData(){
      this.$axios.get("/reader/MemberCount")
          .then(res=>{
            console.log(res)
            if (res.data.data){
              for (let i=0;i<res.data.data.length;i++){
                this.option.series[0].data.push({name:res.data.data[i].address,value:res.data.data[i].count})
              }
              this.echart.setOption(this.option);
            }
          })
    }
  },
}
</script>

<style scoped>

</style>